<script setup lang="ts">
import house from "~/assets/images/join/house.png";
import vip from "~/assets/images/join/vip.png";
import money from "~/assets/images/join/money.png";

defineOptions({
  name: "Join",
});
</script>

<template>
  <div class="grid grid-cols-3 gap-16 mt-7">
    <div class="col-span-2 bg-white rounded-lg px-8 flex items-center">
      <div class="flex-1">
        <div class="text-3xl">平台入驻 值得信赖</div>
        <div class="text-gray-400 mt-4">极速入驻，专业团队为您保驾护航</div>
        <div class="text-gray-400">多企业合作，值得信赖</div>
        <div class="grid grid-cols-3 mt-8">
          <div>
            <div>入驻量</div>
            <div class="mt-5">
              <span class="text-4xl">14</span>
              <span class="text-gray-400">万+</span>
            </div>
          </div>
          <div>
            <div>平台累计用户量</div>
            <div class="mt-5">
              <span class="text-4xl">2087</span>
              <span class="text-gray-400">万+</span>
            </div>
          </div>
          <div>
            <div>平台累计用户量</div>
            <div class="mt-5">
              <span class="text-4xl">10236</span>
              <span class="text-gray-400">家</span>
            </div>
          </div>
        </div>
      </div>
      <div>
        <el-image :src="house" style="width: 210px; height: 210px"></el-image>
      </div>
    </div>

    <div class="bg-white rounded-lg px-8 pt-8 pb-2 vip-bg">
      <div
        class="w-[40px] h-[40px] bg-[#231815] rounded-lg float-right flex items-center justify-center"
      >
        <el-image :src="money" style="width: 26px; height: 20px"></el-image>
      </div>
      <div class="text-[#FFB04F] font-bold text-3xl">会员尊享权益</div>
      <div class="text-white mt-4">加入会员畅享权益，享受不一样的体验</div>
      <div class="flex items-center">
        <el-image :src="vip" style="width: 210px; height: 210px"></el-image>
        <div>
          <div
            class="py-3 px-10 rounded-full text-[#ffb04f] font-bold cursor-pointer"
            style="border: 2px solid #ffb04f"
          >
            查看权益
          </div>
          <div
            class="py-3 px-10 rounded-full text-[#ffb04f] font-bold mt-6 cursor-pointer"
            style="border: 2px solid #ffb04f"
          >
            查看套餐
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.vip-bg {
  background: url("/assets/images/bg/vip-bg.png") no-repeat;
  background-size: 100% 100%;
}
</style>
